【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案

今天開始進入切版實戰囉!

大家平常在上網時，不妨可以看看你所在的網頁版面配置是如何，雖然因為技術推陳出新，越來越無法輕易看出原本的專案結構，但這算是一個練習的小方法。
我在切板時，會先用ppt畫出草稿，區分出對應的div。

譬如說這次要來練習的版型如下:。
越困難的版型，就會越難切，但原理都是一樣的，就是將大的元件拆分成小的元件。

接下來，就要開始透過Vue.js這個前端框架開始實作版面，有關Vue、npm、git的介紹，這裡就不贅述了。
在建立專案前，務必先download相關的工具，包含:node.js、npm、git(版控)。

接著我們透過npm下載Vue-cli命令列工具，安裝完畢後可使用 $ vue -v查看版本。

npm install -g vue-cli

接著，再透過vue cli建立專案，webpack是用來打包程式碼的工具。

vue init webpack myWebsite

建立過程可依需求調整相關選項：
建議安裝 vue-router (需要安裝作為 SPA 路由)
建議安裝 ESLint (檢查 coding style 套件，保持專案風格一致)

構建完成後，再來看的是專案的目錄結構，在使用框架時，非常重要的事，你要找到它的Entry Point(進入點)在哪裡。

裡面有幾個重要的檔案跟資料夾:

main.js: 程式入口檔案，是初始化vue例項並使用需要的外掛,載入各種公共元件.
App.vue: 是我們的主元件，頁面入口檔案，所有頁面都是在App.vue下進行切換的。也是整個專案的關鍵，app.vue負責構建定義及頁面元件歸集。
index.js: 把準備好路由元件註冊到路由裡，當要切換頁面時，就必須要在這裡註冊你的路由(route)。
index.html: 是一個會html-webpack-plugin 處理的模板。在Build的過程中，資源會被注入到這。
components資料夾: 放置元件(Component)。
node_modules資料夾: 存放下載下來的模組(package)。
build資料夾: 配置了webpack的基本配置、開發環境配置、生產環境配置等。
static資料夾: 這裡我用來存放CSS檔案。

首先我們在components資料夾裡新增一個MainPage.vue的vue template。

先從右上方的橫幅標題開始

<div class="content">
        <div class="banner">
          <div>
           <div class="picture">
             <img src="../assets/title.jpg" class="bar_picture">
           </div>
           <div>
              <span class="intro">李培華
                <p class="introduction">正在努力邁向前端工程師之路。</p>
                </span>
           </div>
          </div>
        </div>
         <component :is="currentTab" keep-alive></component>
    </div>

定義一下banner這個CSS，我直接在CSS設定banner的背景圖片，cover使用於背景圖片小於容器時，將背景圖片的大小放大至容器的大小並填滿，缺點是如果容器的長寬比例與背景圖片的長寬比例不吻合，會出現背景圖片失真的情況。

.content .banner {
     margin-left:280px;
     width: 100%;
     height: 200px;
     background: url('../../src/assets/bar.jpg') center center fixed no-repeat;
     background-size:cover;
 }

.content .banner div {
      display: inline-block;
 }

接下來是左邊的區塊(淺藍框框)。

   <div class="menu">
      <div class="title">
        <div>
         <img src="../assets/title.jpg" class="min_picture">
        </div>
         <div>
           <p>Grant Li(李培華)</p><br><br><br><br>
         </div>

      </div>
       <ul>
        <li @click="changeView(Home)" class="liststyle">Home(首頁)</li>
        <li @click="changeView(WorkExperience)" class="liststyle">Work Experience(工作經歷)</li>
        <li @click="changeView(ProjectExperience)" class="liststyle">Project Experience(專案經歷)</li>
        <li @click="changeView(Portfolio)" class="liststyle">Portfolio(作品集)</li>
        <li @click="changeView(Photo)" class="liststyle">Photo(相片)</li>
      </ul>
    <div class="link">
        <a href="https://www.facebook.com/profile.php?id=100001824960776">
          <div class="fb"></div>
        </a>
        <a href="https://github.com/PefyLi">
          <div class="github"></div>
        </a>
        <a href="https://www.linkedin.com/in/grant-li-3a6680150/">
          <div class="linkedin"></div>
        </a>
         <a href="mailto:pefy19950714@gmail.com">
          <div class="gmail"></div>
        </a>
    </div>
   </div>

左邊的大div中，分邊包含了小標題、菜單及社群媒體標籤三個div，我這邊想做的是透過左邊的菜單點選，右下方的內容區呈現對應的內容。
對應的CSS，title中的div我們想讓它平行排列，這時候就必須設定display屬性為inline-block，不然div預設會是垂直排列喔。

 .title {

     width: 100%;
     height: 100px;
     background: url('../../src/assets/887.jpg') no-repeat;
     background-size:cover;

}

 .title div{
   display: inline-block;
}

 .menu .link{
   width: 100%;
   position: absolute;
   left: 0;
   bottom: 0;
}

 .menu .link div {
     height: 50px;
     width: 50px;
     display: inline-block;
}

 .menu .link .fb {
     background: url('../../src/assets/facebook.png') no-repeat;
     background-size: auto 33px;
     margin-left: 20px
}
 .menu .link .fb:hover {
     width: 50px;
     height: 50px;
     background: url('../../src/assets/facebook.png') no-repeat;
     background-size: auto 40px;
}


 .menu .link .github {
     background: url('../../src/assets/github.png') no-repeat;
     background-size: 33px auto;
}
  .menu .link .github:hover {
     width: 50px;
     height: 50px;
     background: url('../../src/assets/github.png') no-repeat;
     background-size: auto 40px;
}

 .menu .link .linkedin {
     background: url('../../src/assets/linkedin.png') no-repeat;
     background-size: 33px auto;
}
  .menu .link .linkedin:hover {
     width: 50px;
     height: 50px;
     background: url('../../src/assets/linkedin.png') no-repeat;
     background-size: auto 40px;
}
 .menu .link .gmail {
     background: url('../../src/assets/gmail.png') no-repeat;
     background-size: 33px auto;
}
  .menu .link .gmail:hover {
     width: 50px;
     height: 50px;
     background: url('../../src/assets/gmail.png') no-repeat;
     background-size: auto 40px;
}

.liststyle{
  height: 30px;
  padding: 15px;
  margin-top:15px;
}

半成品: